<script setup lang="js">
  import { ref, onMounted } from 'vue';
  import { ElMessage, ElLoading } from "element-plus";
  import { useRouter, useRoute } from 'vue-router'
  import login from '../../components/login/index.vue'
  import { getModelList } from "../../api/model/index.js";
  import request from '../../request/axios'
  import axios from 'axios';
  const router = useRouter();
  const route = useRoute() // 获取路由对象

  const childLoginRef = ref(null)
  const onChatBot = () => {
    if (!localStorage.getItem("token")) {
      childLoginRef.value.isLoginClose();
      return
    }
    router.push('/initialization')
  }
  const modelList = ref([])
  const getModel = async () => {
    try {
      const res = await getModelList();
      if (res.code == 200) {
        modelList.value = res.data
        return
      }
    } catch (error) {
      console.log(error);
    }
  }
  getModel()

  const getAutoToken = async (urlauth) => {
    console.log(urlauth);
    try {
      const data = { urlauth }
      const res = await request.postV2({ url: `/v1/api-auto-login`, data })
      if (res.code !== 200) return ElMessage.warning("暂未获取到用户信息，请稍后重试")
      localStorage.setItem("token", res.data.token)
    } catch (error) {
      console.log(error)
    }
  }

  onMounted(() => {
    if (route.query.urlauth) {
      getAutoToken(route.query.urlauth)
    }
  })
</script>

<template>
  <div class="content-empty">
    <!-- <div class="subtitle">ChatBot</div> -->
    <div class="title">
      <img src="../../assets/image/icon/home-logo.png" class="logo-img" />
    </div>
    <div class="title-tip">海量信息全网搜，结果精准可溯源、深度思考推理，解答思路清晰可见</div>
    <el-button type="primary" class="button-box" @click="onChatBot">开始对话</el-button>
    <login ref="childLoginRef" :isLogin="true" /> <!-- 添加 login 组件 -->
    <!-- <div class="model-content">
      <div class="model-box" v-for="item in modelList" :key="item.id">
        <img src=""> 
        {{ item.producer }}
      </div>
    </div> -->
  </div>
</template>

<style scoped lang="scss">
  .logo-img {
    width: 460px;
    margin: 0 auto;
  }

  .content-empty {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: #fff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(../../assets/image/empty-bgc.png);

    .subtitle {
      color: #2D66B3;
      margin: 36px;
    }

    .title {
      color: #000000;
      font-size: 80px;
      font-weight: bold;
      text-align: center;
      margin-top: 14%;
    }

    .title-tip {
      color: #606771;
      font-size: 16px;
      text-align: center;
      width: 800px;
      margin: 20px auto 20px;
      line-height: 33px;
    }

    .button-box {
      width: 350px;
      height: 66px;
      font-size: 24px;
      border-radius: 50px;
      margin: 20px auto;
      margin-left: calc(50% - 175px);
      background-color: #2D66B3;
    }

    .model-content {
      width: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 40px auto;
      flex-wrap: wrap;

      .model-box {
        width: 300px;
        margin: 20px 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 10px;
        border-radius: 17px;
        background-color: #fff;

        img {
          width: 46px;
          height: 46px;
          border-radius: 50%;
          margin-right: 10px;
          background-color: #D8D8D8;
        }
      }
    }
  }
</style>